<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-17 15:03:59
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-09 11:42:39
 * @FilePath: \cxl-h5\src\pages\personalCenter\invoice\history\Index.vue
-->
<template>
    <section class="invoice-list-container">
        <section class="main">
            <van-pull-refresh v-model="data.refreshLoading" @refresh="data.onRefresh" class="list-main">
                <van-list
                    v-model:loading="data.dataLoading"
                    :finished="data.dataFinished"
                    :finished-text="data.list.length ? '' : ''"
                    @load="data.onLoad"
                    loading-text=" "
                    class="van-list-main"
                    offset="150"
                >
                    <section class="box">
                        <!-- 有记录 -->
                        <section class="list" v-if="data.list.length">
                            <section
                                class="li"
                                v-for="item in data.list"
                                :key="item"
                                @click="data.openInvoiceDetailed(item)"
                            >
                                <section class="info">
                                    <p>{{ item.createTime }}</p>
                                    <span><i>¥</i> {{ item.amount }}</span>
                                </section>
                                <section :class="['status', item.invoiceStatus === 1 ? 'waiting' : 'finish']">
                                    <p>{{ item.invoiceStatus === 1 ? '开票中' : '已开票' }}</p>
                                    <span class="iconfont icon-arrow-right"></span>
                                </section>
                            </section>
                        </section>

                        <section style="height: 3rem"></section>
                        <!-- 无记录 -->
                        <section class="none" v-if="data.empty">
                            <NoOrder
                                describe="暂未查询到任何开票记录"
                                button-text="返回"
                                @touch="data.onOpenDetection"
                            ></NoOrder>
                        </section>
                    </section>
                </van-list>
            </van-pull-refresh>
        </section>
    </section>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import InvoiceList from '.'
import NoOrder from '@/components/NoOrder.vue'

const data = reactive(new InvoiceList())
</script>

<style scoped lang="scss">
.invoice-list-container {
    height: 100vh;
    background-color: var(--cxl-color-f2f6f8);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .main {
        height: 100%;
        box-sizing: border-box;
        padding: var(--cxl-size-16) 0;
        .list-main {
            background-color: var(--cxl-color-f2f6f8);
        }
        .box {
            box-sizing: border-box;
            padding: 0 var(--cxl-size-16);
        }
        .list {
            background-color: var(--cxl-color-white);
            border-radius: var(--cxl-size-6);
            box-sizing: border-box;
            padding: var(--cxl-size-16);

            width: 100%;

            .li {
                &:not(:last-child) {
                    border-bottom: 1px solid var(--cxl-color-f0f0f0);

                    margin-bottom: var(--cxl-size-16);
                }
                display: flex;
                align-items: center;
                justify-content: space-between;

                .info {
                    p {
                        font-size: var(--cxl-size-13);
                        color: var(--cxl-color-999999);
                        margin-bottom: var(--cxl-size-6);
                    }
                    span {
                        font-size: var(--cxl-size-18);
                        color: var(--cxl-color-333333);
                        font-weight: 600;
                        i {
                            font-size: var(--cxl-size-14);
                            color: var(--cxl-color-333333);
                        }
                    }
                }
                .status {
                    display: flex;
                    align-items: center;
                    font-size: var(--cxl-size-14);
                    p {
                        margin-right: var(--cxl-size-6);
                    }
                    &.waiting {
                        p {
                            color: var(--cxl-color-f57221);
                        }
                    }
                    &.finish {
                        p {
                            color: var(--cxl-color-primary);
                        }
                    }
                }
            }
        }
    }
}
.none {
    height: calc(100vh - var(--cxl-size-12) - var(--cxl-size-40));
}
</style>
